<template>
	<Page contentClass='h fv' :contentStyle="{ minHeight:'400px'}" bgcolor='' :style="'background:url('+Ico_login_bg+') no-repeat center/cover'">
		<section class='ex fxmr'>
			<div class='bcf r5px' style='width:420px;padding:0 4% 40px;margin-right:15%'>
				<header class='fxmc ptb30'><img style='height:30px' :src='Ico_logo'/></header>
				<Form ref='formRef' #='{ form }' :dir='2' :rules='rules' @submit='onSubmit' @init='onInit'>
					<FormItem name='username'><Input v-model:value='form.username' :disabled='ajax.loading' :imgIcon='Ico_user' p='请输入账号'/></FormItem>
					<FormItem name='password' :mt='20'><Input type='password' v-model:value='form.password' :disabled='ajax.loading' :imgIcon='Ico_pwd' p='请输入密码'/></FormItem>
					<FormItem name='code' :mt='20'>
						<div class='fxm'>
							<Input class='ex' v-model:value='form.code' :disabled='ajax.loading' p='请输入验证码'/>
							<img class='h30 ml10 cp' v-if='src' :src='src' alt='验证码' @click='onCode' />
						</div>
					</FormItem>
					<Button label='登录' :loading='ajax.loading' class='w mt30' html-type='submit' />
				</Form>
			</div>
		</section>
		<footer className='tc cf pb5 f12'>川ICP备12345678号</footer>
	</Page>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	/* --------------------------- Sync Function --------------------------- */
	import { login } from '@com/login/login'
	/* --------------------------- images --------------------------- */
	import Ico_login_bg from '@img/login/login_bg.png'
	import Ico_logo 	from '@img/login/logo.png'
	import Ico_user		from '@img/login/user.png'
	import Ico_pwd 		from '@img/login/pwd.png'
	/* --------------------------- Async Component --------------------------- */
	const Page 		= $.lazy(()=>import('@tp/content.vue'))
	const Form 		= $.lazy(()=>import('@antd/form/layout/form.vue'))
	const FormItem 	= $.lazy(()=>import('@antd/form/layout/form-item.vue'))
	const Input 	= $.lazy(()=>import('@antd/form/input.vue'))
	const Button 	= $.lazy(()=>import('@antd/button.vue'))
	/* --------------------------- ref --------------------------- */
	let ajax = $ref({})
	let formRef = $ref()
	let src = $ref()
	/* --------------------------- 表单验证 --------------------------- */
	const rules = {
		username:[ { required: true, message: '请输入用户名', whitespace:true, trigger: ['change','blur'] } ],
		password:[ { required: true, message: '请输入密码', whitespace:true, trigger: ['change','blur'] } ],
		code:[ { required: true, message: '请输入验证码', whitespace:true, trigger: ['change','blur'] } ]
	}
	/* --------------------------- 获取验证码 --------------------------- */
	const onCode = () => {
		// $http.pull(null, 'captchaImage', { token:false }).then(({ uuid, img}) => {
		// 	src = (`data:image/jpg;base64,${img}`).replace(/[\r\n]/g,'')
		// 	ajax.model = { uuid }
		// })
	}
	onCode()
	/* --------------------------- 默认运行 --------------------------- */
	const onInit = ({ formRef }) => {
		formRef.setValue({ username:'test', password:'123456', code:'123' })
	}
	/* --------------------------- 登录 --------------------------- */
	const router = useRouter()
	const onSubmit = param => login({ api: 'user/login', ajax, router, param, to:'/main/form-search/menu' })
</script>
